<template>
  <div class="video" :class="{none:!showDailog}">
      <x-dialog :show.sync="showDailog" class="dialog-video">
        <div class="img-box" @click.stop="playVideo">
         <video id="my-player" vjs-fluid playsinline class="video-js vjs-big-play-centered" style="width= 100%; height=100%; " controls  data-setup='{}'>
        <source v-if="videoUrl"  :src="videoUrl" type="video/mp4" />
        <source v-if="videoUrl"  :src="videoUrl" type="video/mov" />
        <source v-if="videoUrl"  :src="videoUrl" type="video/ogg" />
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="http://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
          </a>
        </p>
      </video>
        </div>
        <div>
          <x-icon type="ios-close" size="38" class="icon-red" @click.passive.stop="closeVideo"></x-icon>
        </div>
      </x-dialog>
  </div>
</template>
<script>
import videojs from 'video'
import 'video.js/dist/video-js.min.css'
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: { XDialog },
  props: {
    videoUrl: {
      type: String,
      required: true
    },
    showDailog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      myPlayer: '',
      // pathVideo: 'http://118.212.184.170/wxjx/file/video'
      pathVideo: '',
    }
  },
  watch: {
    videoUrl(val) {
      this.showDailog = true;
      return this.pathVideo + val;
    },
    myPlayer(val) {
      return val;
    }
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    initVideo() {
      var vm = this;
      vm.myPlayer = videojs('my-player', {
        "controls": true,
        "autoplay": true,
        "preload": "auto",
        "loop": false,
        controlBar: {
          captionsButton: true,
          chaptersButton: true,
          playbackRateMenuButton: true,
          LiveDisplay: true,
          subtitlesButton: false,
          remainingTimeDisplay: true,
          progressControl: true,
          volumeMenuButton: {
            inline: true,
            vertical: true
          },//竖着的音量条
          fullscreenToggle: false
        }
      });
    },
    //播放视频
    playVideo() {
      var vm = this;
      vm.myPlayer.src(vm.pathVideo + vm.videoUrl);  //重置video的src
      vm.myPlayer.load(vm.pathVideo + vm.videoUrl);  //使video重新加载
      vm.myPlayer.play();
    },
    //关闭视频
    closeVideo() {
      var vm = this;
      // this.showDailog = false;
      setTimeout(function () {
        var video = document.getElementById('my-player_html5_api') || document.getElementById('my-player');
        video.pause();
      }, 1000)
      this.$emit('changeDialog', false)
    }
  },
}
</script>
<style lang="less" >
@import "../../assets/style/formreset.css";
.dialog-video {
  .img-box {
    position: relative;
    width: 640px;
    height: 701px;
    background: url("../../assets/img/video-panel.png") no-repeat;
    background-size: 640px 701px;
  }
}
.video-js {
  position: absolute;
  left: 138px;
  top: 220px;
  width: 350px;
  height: 400px;
}
.video-js .vjs-tech {
}
.my-player-dimensions {
  position: absolute;
  left: 138px;
  top: 220px;
  // width: 100%;
  // height: 320px;
  margin: 0 auto;
  width: 350px;
  height: 400px;
  z-index: 999;
}
// .video {
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   z-index: 999;
// }
.myvideo {
  width: 640px;
  height: auto;
  margin: 0 auto;
  .vjs-paused .vjs-big-play-button,
  .vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
  }
  .video-js .vjs-big-play-button {
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
  }
  /* 中间的播放箭头 */
  .vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
  }
  .video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
  }
  /* 加载圆圈 */
  .vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
  }
  .video-js .vjs-time-control {
    display: block;
  }
  .video-js .vjs-remaining-time {
    display: none;
  }
}
</style>
